<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../perEvaluationResult/importhead.jsp" %>
<%@ page import = "model.*"%>
<%@ page import="util.properties.UserLoginStatus"%>
<!DOCTYPE html>
<html>
	<head>
<%
	request.setCharacterEncoding("utf-8");
	String schoolname = request.getParameter("schoolname");
	String checktime = request.getParameter("checktime");
	String gradename = request.getParameter("gradename");
	int checktypeid = Integer.parseInt(request.getParameter("checktypeid"));
%>
		<meta charset="utf-8">
		<title>年级MHT测评统计分析（维度分析）</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<style>
			html,body{
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			.classMHTLayer-top{
				height: 10%;
				line-height:10%;
				margin: 5px;
				border: 1px solid #BED5F3;
			}
			.classMHTLayer-top ul li{
				list-style: none;
				float: left;
				margin-left: 15px;
				margin-top: 10px;
				border-radius: 3px;
			}
			.classMHTLayer-top ul li button{
				background-color: #F8F8F8;
				border: 1px solid #BED5F3 !important;
			}
			.classMHTLayer-con{
				height: 80%;
				margin: 5px;
			}
			.classMHTLayer-con .left .top,.right .top{
				position: relative;
				padding-left: 10px;
				color: #183152;
				font-weight: bold;
				height: 35px;
				line-height: 35px;
				background: #E5EFFE;
				overflow: hidden;
			}
			.classMHTLayer-con .left{
				height: 100%;
				width: 49%;
				float: left;
				border: 1px solid #BED5F3;
			}
			.classMHTLayer-con .right{
				height: 100%;
				width: 50%;
				float: right;
				border: 1px solid #BED5F3;
			}
		</style>
	</head>
	<body>
		<div class="classMHTLayer-top">
			<ul>
				<li><button id="xxjl" class="layui-btn layui-btn-sm layui-btn-primary">学习焦虑</button></li>
				<li><button id="sjjl" class="layui-btn layui-btn-sm layui-btn-primary">社会焦虑</button></li>
				<li><button id="cdqx" class="layui-btn layui-btn-sm layui-btn-primary">冲动倾向</button></li>
				<li><button id="gdqx" class="layui-btn layui-btn-sm layui-btn-primary">孤独倾向</button></li>
				<li><button id="gmqx" class="layui-btn layui-btn-sm layui-btn-primary">过敏倾向</button></li>
				<li><button id="kbqx" class="layui-btn layui-btn-sm layui-btn-primary">恐惧倾向</button></li>
				<li><button id="zzqx" class="layui-btn layui-btn-sm layui-btn-primary">自责倾向</button></li>
				<li><button id="stzz" class="layui-btn layui-btn-sm layui-btn-primary">身体症状</button></li>
			</ul>
		</div>
		<div class="classMHTLayer-con">
			<div class="left">
				<div class="top">
					<span><%=schoolname%><%=gradename%><%=checktime%>测评统计报告</span>
				</div>
				<table class="layui-hide" id="tabclassMHTresult" lay-filter="tabclassMHTresult"></table>
			</div>
			<div class="right">
				<div class="top" style="margin-bottom:6px"></div>
				<div id="echarts" style="width: 550px;height:300px; backgroud:red"></div>
			</div>
		</div>
	</body>
	
	<script src="../js/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="../lib/echarts.common.min.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="../lib/jquery.cookie.js"></script>
    <script src="../lib/json2.js"></script>
	<script type="text/javascript">
	
	
	layui.use(['form','table'], function(){
		var form = layui.form;
		var table = layui.table;
		
		var queryCondtion = "";  //请求检索条件
	   	//初始值
	   	queryCondition = "checktypeid=<%=checktypeid%>";
		queryCondition+= "&itemname=学习焦虑";
		queryCondition+="&gradename=<%=gradename%>"; 
		queryCondition+= "&checktime=<%=checktime%>";
		var chartTitle = "学习焦虑";
		
		var myChart1;
		var option1;
		
		
		/*列表区结构设置结束*/
		queryGridDate();
		//下面是图表的生成
		// 基于准备好的dom，初始化echarts实例
		myChart1 = echarts.init(document.getElementById('echarts'));
		
		// 指定图表的配置项和数据
		option1 = {
		    title : {
		        text: '学习焦虑',
		       
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'right',
		        data: []
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ],
		    animation:false
		};
		
	

       // 使用刚指定的配置项和数据显示图表。
       myChart1.setOption(option1); 
       
       //根据用户输入条件查询数据
	   function queryGridDate(){
	   		table.render({
			elem: '#tabclassMHTresult',
			url: '../sysevaluationresult/getgradecheckstatisbyitem?'+queryCondition,
			title: '班级数据表',
			skin: 'line',
			even: true,
			page: {
				layout: ['count',],
				groups: 5,
				limit:20,
				theme: '#1E9FFF'
			},
			cols: [
				[{
					type: 'numbers',
					title: '序号'
				}, {
					field: 'itemname',
					title: '维度',
					align: "center"
				}, {
					field: 'status',
					title: '程度分级',
					align: "center"
				}, {
					field: 'personcounter',
					title: '分之人数',
					align: "center"
				}, {
					field: 'checknumber',
					title: '测评总人数',
					align: "center"
				}, {
					field: 'rate',
					title: '比例',
					align: "center"
				}]
			]
		}); 
	   
			//通过异步请求action实现数据的保存
	        $.post("../sysevaluationresult/getgradecheckstatisbyitembing?"+queryCondition, null, function(data, status){ 
		         myChart1.setOption({
		         		title : {
				        text: chartTitle,
				       
				        x:'center'
				    },
			         	 legend: {
				        data: data.categories
				    },
				    series : [
				        {
				            data: data.values
				        }
				    ]
		         })
		 	}, "json"); 
		} 
		
		$("#xxjl").click(function(){
			chartTitle="学习焦虑";
	      	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=学习焦虑";
			queryCondition+="&gradename=<%=gradename%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#sjjl").click(function(){
			chartTitle="社交焦虑";
	      	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=社交焦虑";
			queryCondition+="&gradename=<%=gradename%>";
			queryCondition+= "&checktime=<%=checktime%>"; 
			queryGridDate();
		});
		
		$("#cdqx").click(function(){
			chartTitle="冲动倾向";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=冲动倾向";
			queryCondition+="&gradename=<%=gradename%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#gdqx").click(function(){
			chartTitle="孤独倾向";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=孤独倾向";
			queryCondition+="&gradename=<%=gradename%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#gmqx").click(function(){
			chartTitle="过敏倾向";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=过敏倾向";
			queryCondition+="&gradename=<%=gradename%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#kbqx").click(function(){
			chartTitle="恐怖倾向";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=恐怖倾向";
			queryCondition+="&gradename=<%=gradename%>";
			queryCondition+= "&checktime=<%=checktime%>"; 
			queryGridDate();
		});
		
		$("#zzqx").click(function(){
			chartTitle="自责倾向";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=自责倾向";
			queryCondition+="&gradename=<%=gradename%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
		
		$("#stzz").click(function(){
			chartTitle="身体症状";
	       	queryCondition = "checktypeid=<%=checktypeid%>";
			queryCondition+= "&itemname=身体症状";
			queryCondition+="&gradename=<%=gradename%>"; 
			queryCondition+= "&checktime=<%=checktime%>";
			queryGridDate();
		});
	});

	</script>
</html>
